<template>
  <div class="main-box" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
    <div class="upper">
      <div class="transfer-header">
        <div v-show="!loading">
          <img src="@/assets/image/transfer.png" class="transfer-icon" />
        </div>
        <div class="transfer-info">
          <div class="amount-display" v-show="!loading">
            <money
              class="money-icon"
            />
            {{transferHistoryMsg.transferAmount}}
          </div>
          <div class="transfer-remark">{{transferHistoryMsg.transferRemark?transferHistoryMsg.transferRemark : transferHistoryMsg.illustrate}}</div>
        </div>
      </div>
    </div>
    <div class="lower">
      <div class="lower-text">
        <span>{{transferHistoryMsg.type}}</span>
      </div>
      <div class="logo-container">
        <img src="@/assets/image/logo.png" class="logo-small" />
      </div>
    </div>
  </div>
</template>

<script>
import money from "@/assets/icon/money.svg";
import service from "../../utils/request";
export default {
  name: "Transfer",
  components: {
    money
  },
  props: {
    transferId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      transferHistoryMsg: {
        transferAmount: null,
        illustrate: null,
        type: null
      }
    };
  },
  methods: {
    initRransferMessage() {
      this.loading = true;
      service({
        method: "get",
        url: "users/transferHistory/byId",
        params: {
          transferId: this.transferId
        }
      })
        .then(res => {
          this.transferHistoryMsg = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRransferMessage();
    });
  }
};
</script>

<style scoped>
.main-box {
  cursor: pointer;
  height: 100px;
  width: 270px;
}
.upper {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #f4b40b;
  width: 100%;
  height: 77%;
}
.lower {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #ebcb69;
  width: 100%;
  height: 23%;
}
.lower-text {
  font-size: 12px;
  padding: 2px 0 2px 6px;
  color: white;
}

/* 提取的内联样式 */
.transfer-header {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 20px;
}

.transfer-icon {
  width: 40px;
}

.transfer-info {
  color: white;
  margin-left: 10px;
  line-height: 1.6rem;
}

.amount-display {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.money-icon {
  width: 13px;
  height: 13px;
  margin-right: 1px;
  margin-bottom: 2px;
}

.transfer-remark {
  font-size: 13px;
  color: #f1f1f1;
}

.logo-container {
  display: flex;
  margin-left: auto;
  margin-right: 5px;
}

.logo-small {
  width: 20px;
}
</style>
